<template>
	<!-- background 组件背景颜色
	item 数据 -->
	<view class="equity_container" :style="{'background':background}">
		<!-- 顶部详细信息 -->
		<view class="top_info">
			<image src="../../static/images/nft/daoLogo2.jpg" mode="" class="cover"></image>
			<view class="content">
				<view class="title">{{item.name}}</view>
				<view class="description">{{item.description}}</view>
			</view>
		</view>
		<!-- 底部按钮信息 -->
		<view class="bottom_btn">
			<view class="">类型:{{item.type == 0 ?'票务':'商品'}}</view>
			<view class="btn">
				<u-button text="查看详情" color="var(--echo-main-color)" class="bottom_btn" size="small" :plain="true"
					shape="circle" @click="goDetail"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object
			},
			background: {
				type: String,
				default: 'rgb(241, 241, 241)'
			}
		},
		data() {
			return {

			}
		},
		methods:{
			goDetail(){
				this.$emit('goDetail')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.equity_container {
		border-radius: 8rpx;
		color: #fff;
		margin-bottom: 30rpx;

		.top_info {
			display: flex;
			padding: 20rpx;
			align-items: center;

			// 封面
			.cover {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			// 内容
			.content {

				.title {
					font-size: $echo-font-size-title;
					margin-bottom: 10rpx;
				}
			}
		}

		// 底部按钮
		.bottom_btn {
			background-color: #414040 !important;
			border-top: 1px solid #504d4d;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
		}
	}
</style>
